import React from 'react';
import {
    Row,
    Col,
    Table,
    Button,
    Modal,
    Form,
    message
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import { Link } from 'dva/router';
import './balance.less'
const FormItem = Form.Item;

// export default class BalanceAlarm extends React.Component {
class BalanceAlarms extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.state = {
            dataSource: [],
            loading: true,
            visible: false,
            visibleCom: false,
            user: user
        };

    };
    componentDidMount() {
        this.getBalance();
        // this.props.form.validateFields();
    }

    getBalance() {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        const url = `${config.api}DailyStatics/GetTraderInfo`;
        axios.get(url, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            //console.log(data)
            //console.log(data.data.tradersInfo);
            this.setState({ loading: false, dataSource: data.data.tradersInfo });
        })
        .catch(err => {
            intercept
        })
    }

    //编辑工作内容模态框
    showModalCompile = (e, record) => {
        //console.log(record)
        this.setState({
            visibleCom: true,
        });
        this.setState({
            // ComTicket: record.ticketAmount,
            comId: record.traderID
        })
        //console.log(record.ticketAmount)
    }
    handleOkCompile = (e) => {
        this.setState({
            visibleCom: false,
        })
    }
    CompileSubmit = (e) => {
        e.preventDefault();
        const token = sessionStorage.getItem("token");
        const params = this.props.form.getFieldsValue();
        const user = this.state.user;
        const url = `${config.api}DailyStatics/ApplyTraderCharge`;
        axios.post(url, { ticketAmount: params.ticketAmount, chargeMoney: params.chargeMoney, traderID: this.state.comId, UserName: user.UserName }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            //console.log(data)
            if (data.data.result) {
                this.getBalance();
                message.success('充值成功！')
            } else {
                message.warning(data.data.errorMessage)
            }
        })
        .catch(err => {
            intercept
        })

        this.setState({
            visibleCom: false,
        })
    }
    handleCancelCompile = (e) => {
        this
            .props
            .form
            .resetFields();
        this.setState({
            visibleCom: false,
        });
    }

    render() {
        const column = [
            {
                title: "分销商",
                dataIndex: "trader"
            }, {
                title: "日访问量",
                dataIndex: "dailyAmount"
            }, {
                title: "可售票数",
                dataIndex: "ticketAmount"
            }, {
                title: "账户余额",
                dataIndex: "accountBalance"
            }, {
                title: '操作',
                width: 150,
                key: 'action',
                render: (text, record) => {
                    return (
                        <span>
                            {<Button type="primary" ghost onClick={(e, record) => { this.showModalCompile(e, text) }}>充值</Button>}
                        </span>
                    )
                }
            }
        ];
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 6
                }
            },
            wrapperCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 14
                }
            }
        };
        return (

            <div>
                <Modal
                    title="编辑"
                    visible={this.state.visibleCom}
                    onOk={this.handleOkCompile}
                    onCancel={this.handleCancelCompile}
                    footer={null}
                >
                    <Form onSubmit={this.CompileSubmit}>

                        <FormItem {...formItemLayout} label={(
                            <span>
                                充值金额

                    </span>
                        )} hasFeedback>
                            {getFieldDecorator('chargeMoney', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入充值金额!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input type="number" />)}
                        </FormItem>
                        <FormItem {...formItemLayout} label={(
                            <span>
                                充值票数

                    </span>
                        )} hasFeedback>
                            {getFieldDecorator('ticketAmount', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入充值票数!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input type="number" />)}
                        </FormItem>
                        <Row>
                            <Col span={24}>
                                <FormItem className="center">
                                    <Button type="primary" className="submitBtn" htmlType="submit">提交</Button>{' '}
                                    <Button onClick={this.handleCancelCompile}>取消</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
                <Row gutter={8}>
                    <Col span={24}>
                        <div className="recharge"><span className='title'>分销商情况查询</span></div>
                        <div><Link to="./chargeRecord" className="record" >充值记录</Link></div>
                        <Table
                            className='center'
                            columns={column}
                            dataSource={this.state.dataSource}
                            pagination={true}
                            bordered={true}
                            loading={this.state.loading} />

                    </Col>
                </Row>
            </div>
        )
    }

}
const BalanceAlarm = Form.create()(BalanceAlarms);
export default BalanceAlarm
